import {routing} from "../../utils/routing";

interface Trip {
    id: string,
    start: string,
    end: string,
    duration: string,
    fee: string,
    distance: string,
    status: string
}

interface MainItem {
    id: string,
    navId: string,
    navScrollId: string,
    data: Trip
}

interface NavItem {
    id: string,
    mainId: string,
    label: string
}

interface MainItemQueryResult {
    id: string,
    top: number,
    dataset: {
        navId: string,
        navScrollId: string
    }
}

Page({
    scrollStates: {
        mainItems: [] as MainItemQueryResult[]
    },
    data: {
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        circular: true,
        multiItemCount: 1,
        prevMargin: '',
        nextMargin: '',
        vertical: false,
        current: 0,
        /*imgUrls: [
            'https://img4.mukewang.com/60ac564200010e8517920764.jpg',
            'https://img2.mukewang.com/60adb10500011f0b17920764.jpg',
            'https://img4.mukewang.com/609b4cf000016eeb17920764.jpg',
            'https://img4.mukewang.com/60a484de0001627a17920764.jpg',
            'https://img.mukewang.com/60a1d21000017b6f17920764.jpg'
        ],*/
        promotionItem: [
            {
                img: 'https://img4.mukewang.com/609b4cf000016eeb17920764.jpg',
                promotionID: 1,
            },
            {
                img: 'https://img2.mukewang.com/60adb10500011f0b17920764.jpg',
                promotionID: 2,
            },
            {
                img: 'https://img4.mukewang.com/609b4cf000016eeb17920764.jpg',
                promotionID: 3,
            },
            {
                img: 'https://img4.mukewang.com/60a484de0001627a17920764.jpg',
                promotionID: 4,
            },
            {
                img: 'https://img.mukewang.com/60a1d21000017b6f17920764.jpg',
                promotionID: 5,
            }
        ],
        avatarURL:'',
        tripsHeight: 0,
        navCount: 0,
        // trips: [] as Trip[],
        mainItems: [] as MainItem[],
        navItems: [] as NavItem[],
        // scrollTop: 0,
        // scrollIntoView: '',
        mainScroll: '',
        navSel: '',
        navScroll: ''
    },

    async onLoad() {
        this.populateTrips()
        const userInfo = await getApp<IAppOption>().globalData
        this.setData({
            avatarURL: userInfo.avatarUrl,
        })
    },

    onReady() {
        wx.createSelectorQuery().select('#heading')
            .boundingClientRect(rect => {
                const height = wx.getSystemInfoSync().windowHeight - rect.height
                this.setData({
                    tripsHeight: height,
                    navCount: Math.round(height/50)
                })
            }).exec()
    },

   /* populateTrips() {
        const trips: Trip[] = []
        for (let i = 0; i < 100; i++) {
            trips.push({
                id: (10001 + i).toString(),
                start: '东方明珠',
                end: '迪士尼',
                distance: '27.0公里',
                duration: '0时44分',
                // fee: '¥128.00元'
                fee: '128.00元',
                status: '已完成'
            })
        }
    },*/
    populateTrips() {
        const mainItems: MainItem[] = []
        const navItems: NavItem[] = []
        let navSel = ''
        let prevNav = ''
        for (let i = 0; i < 100; i++) {
            const mainId = 'main-' + i
            const navId = 'nav-' + i
            const tripId = (10001 + i).toString()
            if (!prevNav) {
                prevNav = navId
            }
            mainItems.push({
                id: mainId,
                navId: navId,
                navScrollId: prevNav,
                data: {
                    id: tripId,
                    start: '东方明珠',
                    end: '迪士尼',
                    distance: '27.0公里',
                    duration: '0时44分',
                    fee: '128.00元',
                    status: '已完成'
                }
            })
            navItems.push({
                id: navId,
                mainId: mainId,
                label: tripId,
            })
            if(i === 0) {
                navSel = navId
            }
            prevNav = navId
        }
        this.setData({
            mainItems,
            navItems,
            navSel
        }, () => {
            this.prepareScrollStates()
        })
    },

    prepareScrollStates() {
        wx.createSelectorQuery().selectAll('.main-item').fields({
            id: true,
            dataset: true,
            rect: true
        }).exec(res => {
            console.log(res)
            this.scrollStates.mainItems = res[0]
        })
    },


    onSwiperChange(e: any) {
        // console.log(e)
        // if (!e.detail.source) {
        //     // caused by our program
        //     return
        // }
        // process
    },

    onPromotionItemTap(e: any) {
        console.log(e)
        const promotionID = e.currentTarget.dataset.promotionId
        if (promotionID) {
            // claim this promotion
        }

    },

    onGetUserInfo(e: any) {
        const userInfo: WechatMiniprogram.UserInfo = e.detail.userInfo
        if (userInfo) {
            getApp<IAppOption>().resolveUserInfo(userInfo)
            this.setData({
                avatarURL: userInfo.avatarUrl
            })
        }
    },

    onRegisterTap() {
        // wx.navigateTo({
        //     url: '/paes/register/register'
        // })
        wx.navigateTo({
            url: routing.register()
        })
    },

    onNavItemTap(e: any) {
        const mainId: string = e.currentTarget?.dataset?.mainId
        const navId: string = e.currentTarget?.id
        if (mainId && navId) {
            this.setData({
                mainScroll: mainId,
                navSel: navId
            })
        }
    },

    onMainScroll(e: any) {
        const top: number = e.currentTarget?.offsetTop + e.detail?.scrollTop
        if (top === undefined) {
            return
        }

        const selItem = this.scrollStates.mainItems.find(v => v.top >= top)
        if (!selItem) {
            return;
        }

        this.setData({
            navSel: selItem.dataset.navId,
            navScroll: selItem.dataset.navScrollId
        })
    }
});
